Por lo tanto, estoy tratando de representar una lista de elementos y quiero diseñar el fondo según el valor de un determinado accesorio.
Opté por usar la función .map .
El código se ve así:
itemCards.map((item) => <div key= {item.id} className={'list_card'} {getCardColor(item)}> El problema aquí es que Typescript insiste en que coloque el operador de propagación (...) antes de la llamada de función de getColorCard .
Así que debería verse así:
itemCards.map((item) => <div key= {item.id} className={'list_card'} {...getCardColor(item)}> y la función getCardColor ve así:
function getCardColor(item: ItemCard): React.CSSProperties { if(item.priority === null){ return ({background:"red"}) } return ({background:"black"}) }Funciona.
Mi pregunta sería ¿por qué necesito un operador de propagación antes de la llamada de función en mi caso?
Lo siento si esto se preguntó antes, pero no sé cómo buscarlo en Google.
Editar: puse lo que devuelve getCardColor
La sintaxis JSX esencialmente se convierte en llamar a una función y pasarle un argumento que es un objeto compuesto por los accesorios y sus valores.
<Func foo="bar" />es aproximadamente lo mismo que:
const props = { foo: "bar" }; Func(props);Si ya tiene un objeto con algunos accesorios y valores, puede usar el operador de extensión para combinar dos objetos.
<Func foo="bar" a={1} /> const moreProps = { a: 1 }; const props = { foo: "bar", ...moreProps }; Func(props);Puedes hacer la difusión dentro del JSX:
<Func foo="bar" {...moreProps} />Pero no se puede simplemente dar una bofetada en un valor por sí mismo de esa manera.
const props = { "a value" };Eso es un error en JS.
Por lo tanto, debe distribuir el valor de retorno de la función.
Sin embargo, su función devuelve undefined , por lo que ponerla en medio de JSX no tiene sentido en primer lugar.